<template>
	<div :style="styles" class="statistical !<sm:w-full !<sm:mr-0 <sm:mb-[24px] !w-[242px] mr-[24px] flex items-center py-[12px] pb-[11px] !pl-[16px] !pr-[13px]">
		<div class="flex justify-center w-full flex-col h-full">
			<div class="flex items-center justify-between pb-[16px]">
				<div class="text-[18px] text-white font-bold flex items-center">{{ leftValue }}</div>
				<div class="text-[14px] font-400 text-right">
					<img src="@/assets/images/statistical/icon.png" class="w-[16px] h-[8px] mr-[8px] text-white" /><span class="text-white"> {{ rightValue }} </span>
				</div>
			</div>
			<div class="flex items-end w-full justify-between">
				<div class="text-white">
					<div class="font-bold text-[12px] !h-[17px] flex items-end">{{ leftName }}</div>
				</div>
				<div class="flex flex-col text-white">
					<div class="text-[12px] font-400 text-right">{{ rightName }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import CountTo from 'vue-count-to';

export default {
	components: {
		CountTo,
	},
	props: {
		leftName: {
			type: String,
			default: '',
		},
		leftValue: {
			type: [String, Number],
			default: null,
		},
		rightName: {
			type: String,
			default: '今日新增',
		},
		rightValue: {
			type: [String, Number],
			default: null,
		},
		bgColor: {
			type: String,
			default: 'linear-gradient(226deg, #606DD2 0%, #2838C5 100%)',
		},
		marginBottom: {
			type: String,
			default: '30px',
		},
		rightMarginBottom: {
			type: String,
			default: '2px',
		},
	},
	data: () => ({}),
	computed: {
		styles() {
			return {
				background: this.bgColor,
			};
		},
	},
};
</script>

<style lang="scss" scoped>
.statistical {
	background: linear-gradient(270deg, #32c2fe 0%, #6786fe 100%);
	@apply w-full rounded-[4px] py-[12px] px-[32px] flex justify-between items-end;
}
</style>
